<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 Animation 图像轮播</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 960px;
        height: 593px;
        margin: 100px auto;
        overflow: hidden;
        position: relative;
    }

    .banner {
        list-style: none;
        width: 3840px;
        height: 593px;
        position: absolute;
        left: 0;
        top: 0;
        animation: banner 12s infinite 1s;
    }
    /* 悬浮暂停 */
    .banner:hover{
        animation-play-state: paused;
    }

    .banner li {
        width: 960px;
        height: 593px;
        float: left;
    }

    .banner li img {
        width: 100%;
        height: 100%;
    }

    @keyframes banner {
        0% {
            left: 0;
        }

        25% {
            left: -960px;
        }

        50% {
            left: -1920px;
        }

        100% {
            left: -2880px;
        }
    
    }
</style>

<body>
    <div class="container">
        <ul class="banner">
            <li>
                <img src="http://p5.qhimg.com/bdm/960_593_0/t019fb1b0e3816c1ceb.jpg" alt="">
            </li>
            <li>
                <img src="http://p2.qhimg.com/bdm/960_593_0/t010c03562720ffc85f.jpg" alt="">
            </li>
            <li>
                <img src="http://p9.qhimg.com/bdm/960_593_0/t0111b0e8acdcb07cc5.jpg" alt="">
            </li>
            <li>
                <img src="http://p5.qhimg.com/bdm/960_593_0/t01b3be474eb3e5a091.jpg" alt="">
            </li>
        </ul>
    </div>
</body>

</html>